import React from 'react';
import {Card, Input, Rate, Select, Col, Button, message} from "antd";
import {submitComment} from "../../api/CommentAPI";

const Option = Select.Option;
const InputGroup = Input.Group;

const {TextArea} = Input;

const selectBefore = (
    <Select defaultValue="Http://" style={{width: 90}}>
        <Option value="Http://">Http://</Option>
        <Option value="Https://">Https://</Option>
    </Select>
);

const formItem = {marginTop: 10};


export default class CommentForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {nickName: '', url: '', email: '', content: ''}
    }

    resetForm = (e) => {
        this.setState({nickName: '', url: '', email: '', content: ''});
        message.success("评论表单已经重置!")
    };


    // 更新昵称
    updateValue = (e) => {
        let name = e.target.name;
        let value = e.target.value;

        var update = {};
        switch (name) {
            case 'nickName':
                update = {nickName: value};
                break;
            case 'url':
                update = {url: value};
                break;
            case 'email':
                update = {email: value};
                break;
            case 'content':
                update = {content: value};
                break;
            default:
                return;
        }
        this.setState(update);
    };

    // 提交评论
    submit = async () => {
        let update = {
            blogId: this.props.blogId,
            nickname: this.state.nickName,
            email: this.state.email,
            url: this.state.url,
            content: this.state.content
        };
        let request = await submitComment(update);
        if (request.status === '200') {
            message.success("感谢您的反馈,评论成功提交!");
            this.setState({content: ''})
        } else {
            message.error(request.data.message)
        }
    };

    render() {
        return (
            <Card>
                文章评分： <Rate/>
                <InputGroup>
                    <Col span={8}>
                        <Input name="nickName" style={formItem} placeholder="(必填)请输入您的昵称" value={this.state.nickName}
                               onChange={this.updateValue}/>
                    </Col>

                    <Col span={8}>
                        <Input name="url" style={formItem} addonBefore={selectBefore} value={this.state.url}
                               placeholder="(可选)请输入您的站点"
                               onChange={this.updateValue}/>
                    </Col>

                    <Col span={8}>
                        <Input name="email" style={formItem} placeholder="(可选)请输入您的邮箱" value={this.state.email}
                               onChange={this.updateValue}/>
                    </Col>
                </InputGroup>
                <TextArea name="content" style={formItem} placeholder="请输入评论内容" value={this.state.content}
                          onChange={this.updateValue}
                          autosize={{minRows: 5, maxRows: 20}}/>
                <InputGroup>
                    <Button key="submit" style={formItem} type="primary" onClick={this.submit}>提交评论</Button>
                    <Button key="reset" style={formItem} type="danger" style={{marginLeft: 20}}
                            onClick={this.resetForm}>重置内容</Button>
                </InputGroup>
            </Card>
        );
    }


}